import type { ProColumns } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { Button } from "antd";
import { useRef } from "react";
import { Link } from "react-router-dom";

interface DataType {
  id: string;
  title: string;
  content: string;
}

// 请求模拟
const request = () => {
  const data: DataType[] = [
    {
      id: "1",
      title: "Vue",
      content: "Vue3-Admin-Template"
    },
    {
      id: "2",
      title: "React",
      content: "React-Admin-Template"
    }
  ];
  return new Promise((resolve) => {
    const res = {
      data: {
        list: data,
        success: true,
        pageNo: 1,
        pageSize: 20,
        total: 1
      }
    };
    setTimeout(() => resolve(res), 1000);
  });
};

const Index: React.FC = () => {
  const actionRef = useRef();
  const columns: ProColumns[] = [
    {
      title: "标题",
      dataIndex: "title",
      copyable: true,
      render: (val, record) => {
        return <Link to={`/table/detail?title=${record.title}`}>{val}</Link>;
      }
    },
    {
      title: "内容",
      dataIndex: "content"
    },
    {
      title: "操作",
      search: false,
      render: () => {
        return <Button type="primary">编辑</Button>;
      }
    }
  ];
  return (
    <ProTable
      rowKey="id"
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async () => {
        const res = await request();
        return {
          data: res.data.list,
          success: res.data.success,
          total: res.data.total
        };
      }}
      tableAlertRender={false}
      rowSelection={{
        type: "checkbox",
        getCheckboxProps: (record: DataType) => ({
          disabled: record.title === "Vue",
          title: record.title
        })
      }}
      toolbar={{
        title: "表格标题", // 可以渲染标题，也可以自定义渲染其他或者操作按钮
        actions: [<Button>新增</Button>]
      }}
      pagination={{
        hideOnSinglePage: false,
        showTotal: (total) => `共${total}页`
      }}
    ></ProTable>
  );
};

export default Index;
